<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            width: 1000px;
            height: 100px;
            background-color: #ccc;
            padding: 0;
            margin: 0;
            list-style: none;

            /* 弹性布局 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul li {
            border: 5px solid deepskyblue; 
        }
        ul li button {
            padding: 10px 20px;
            margin: 0 10px ;
            border: 1px solid #f50;
        }
        ul li button.active {
            background-color: #f50;
        }
    </style>
</head>
<body>

   <ul>
       <li><button>按钮1</button></li>
       <li><button>按钮2</button></li>
       <li><button>按钮3</button></li>
       <li><button>按钮4</button></li>
       <li><button>按钮5</button></li>
   </ul>


    <script>
        // 要求：
            // 给每个按钮绑定事件

        // 传统做法：获取所有按钮标签，循环标签数组，绑定事件
        // 事件绑定
        // var buttons = document.querySelectorAll("ul li button");// 标签数组
        // for(var i = 0 ; i < buttons.length ; i ++){// 循环标签数组
        //     buttons[i].onclick = function(){// 绑定事件
        //         this.className = "active";// 设置当前点击标签的类名
        //     }
        // }


        // 目前做法：通过给祖先元素(父元素)绑定事件，让其后代元素(子元素)同时注册事件
        // 因为事件存在冒泡阶段,所以利用冒泡原理，可以做事件委托
        // 假设想给每个button标签绑定onclick事件,但是委托ul标签绑定事件
        // 结果给ul标签绑定事件之后 
        // ul > li > button
        // button
        // button > li > ul 

        // 经历上述过程，ul所有的后代元素都注册了onclick事件
        // 获取事件源
        // console.log("click",event.target);
        // console.dir(event.target.localName);
        // console.dir(event.target.tagName);
        // 事件委托
        var ul = document.querySelector("ul");
        ul.onclick = function(event){
            // 判断点击的标签是否为button
            if(event.target.localName == "button"){
                var ele = event.target;
                ele.className = "active";
            }
        }
        // 特点：
            // 通过给祖先元素绑定事件，从而给其后代元素绑定事件
            // 减少页面的DOM循环，减少不必要的代码
            // 需要找出事件源 event.target ; 需要提前给事件源添加属性(className ,data-x= ) 或者标签所特有的属性 localName ，tagName
            // 可以动态的给后代(子)元素绑定事件


    </script>
</body>
</html>